<template>
  <div class="details">
    <Navbar></Navbar>
    <Topper></Topper>
    <List></List>

    <div class="big_cake_details">
      <hr />
      <p>
        <Breadcrumb></Breadcrumb>
      </p>
      <div class="cake_details">
        <el-image class="cake-image" style="width: 500px; height: 500px; display: block" :src="cakeForm.cakeImg">
        </el-image>
        <div class="cake_description">
          <span>{{ cakeForm.cakeName }}</span>
          <hr />
          <div>
            描述：
            <p>{{ cakeForm.cakeDescription }}</p>
          </div>
          <div>价格：{{ cakeForm.cakePrice }}</div>
          <div>库存：{{ cakeForm.cakeStock }}</div>
          <div>上架时间：{{ cakeForm.createTime }}</div>
          <div>
            数量： <button>-</button>&nbsp;1
            <button>+</button>

          </div>
          <p class="buy">
            <el-button plain size="medium" class="buy" @click="addCart()"> 加入购物车</el-button>
            <el-button type="warning" size="medium" class="buy" @click="toBuy()">立即购买</el-button>
          </p>
        </div>
      </div>
      <div class="cake_img">
        <div class="lower_nav">
          <span>产品详情</span>



        </div>

        <div class="main_img">
          <hr>
          <img :src="this.cakeForm.cakeDetail">
          <!-- <img src="https://upyun.dinghuale.com/uploads/20230216/202302161317136978.jpg"> -->
          <img src="https://upyun.dinghuale.com/uploads/20230216/202302161317098481.jpg">

        </div>

      </div>





    </div>
    <Footer></Footer>
    <el-dialog title="加入购物车" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
      <!-- <span>鲜花名称:{{ cakeForm.cakeName }}</span> -->
      <h3>鲜花名称:{{ cakeForm.cakeName }}</h3>
      <h4>数量:{{ number }}</h4>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="sureForm()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
  
<script>
import Navbar from "@/components/Navbar.vue";
import Topper from "@/components/Topper.vue";
import Footer from "@/components/Footer.vue";
import List from "@/components/List.vue";
import Breadcrumb from "@/components/Breadcrumb.vue";
import { getById } from "@/api/cake"
export default {
  components: {
    Navbar,
    Topper,
    List,
    Breadcrumb,
    Footer
  },
  data() {
    return {
      number: 1,
      dialogVisible: false,
      cakeForm: {

      },

    };
  },
  methods: {
    toBuy() {
      let params = {
        'outTradeNo': this.cakeForm.cakeId,
        // 'outTradeNo':1,
        // 'subject': this.orders.business.businessName,
        'subject': this.cakeForm.cakeName,
        // "totalAmount": this.orders.orderTotal
        "totalAmount": this.cakeForm.cakePrice
      }

      // location.href = this.$axios.defaults.baseURL + "server/payment/pcPayment?"+ this.$qs.stringify(params);
      window.open("http://127.0.0.1:9600/server/alipay/pay?subject=" + this.cakeForm.cakeName + "&traceNo=" + Math.floor(Math.random() * 900000) + 100000 + "&totalAmount=" + this.cakeForm.cakePrice * this.number, '_self')


    },
    handleClose(done) {

    }
    ,
    addCart() {
      this.dialogVisible = true

    },
    sureForm() {

      let cartForm = {
        cartImage: this.cakeForm.cakeImg,
        cartName: this.cakeForm.cakeName,
        cakePrice: this.cakeForm.cakePrice,
        cartNumber: this.number,

      }

      saveCart(cartForm).then((res) => {

      })



      this.dialogVisible = false
      this.$message({
        type: 'success',
        message: '添加成功!'
      });


    },
    init() {
      getById(this.$route.query.cakeId)
        .then((res) => {
          this.cakeForm = res.data
        })
    }
  },
  mounted() {
    this.init();
  }
};
</script>
  
<style lang="scss">
.details {
  background-color: #f5f5f5;

  .big_cake_details {
    hr {
      border: none;
      /* 移除默认的边框 */
      height: 2px;
      /* 设置水平线的高度 */
      background-color: #884e22;
      /* 设置水平线的颜色 */
      margin: 20px 0;
      /* 设置上下外边距 */
    }

    .cake_details {
      background-color: #ffffff;
      // border:1px solid black;
      margin-left: auto;
      margin-right: auto;
      width: 70%;
      display: flex;

      // align-items: center;

      .cake-image {
        margin: 20px;
      }

      .cake_description {
        span {
          color: #333333;
          font-weight: 700;
        }

        margin-top: 20px;
        font-size: 30px;
        color: #666666;
        flex: 1;
        text-align: left !important;
        margin-left: 40px;

        div {
          margin-top: 40px;

          button {
            width: 30px;
            height: 30px;
          }

          p {
            color: #333333;
          }
        }
      }
    }

    .cake_img {
      background-color: #ffffff;
      margin-left: auto;
      margin-right: auto;
      width: 70%;
      margin-top: 30px;

      .lower_nav {

        height: 50px;
        text-align: left;

        span {
          line-height: 50px;
          // line-height: 50px;
          // text-decoration-line: underline;
          color: #884e22;

        }
      }

      .main_img {
        text-align: center;
      }
    }
  }
}</style>